Element el |
您所在的位置:网站首页 › el-select value-key › Element el |
1. 用途 el-select即选择器,用于从若干个候选项中选择其中一个(或者多个)。 在传统网页开发中,选择器经常被称作下拉框、下拉列表,是最常用的表单元素之一。 2. 数据绑定 el-select的数据可以来源于固定的若干个选项,或者通过v-for绑定一个数组。 2.1 固定选项 固定选项时,选中项的value与selectedValue双向绑定。 数据来源--固定选项--选中值{{selectedValue}}
效果如下: 2.2 选项绑定数组 选项绑定数组,可以通过v-for循环进行动态绑定。 数据来源--绑定数组--选中值{{selectedCityId}}
export default { data() { return { selectedCityId:'', citys: [{ id: 1, name: '北京' }, { id: 2, name: '上海' }] } } } 效果如下: 3. 功能效果 el-select还封装了一些常用的功能效果,只需要填写一些参数,即可轻松实现这些功能。 3.1 可清空选项 有时候我们希望可以清空已选中的项,此时为el-select添加clearable属性即可。 可清空选项
效果如下,点击选择器右侧的叉号图标即可清空已选中的选项。 3.2 多选 可以为el-select设置multiple启用多选,注意此时绑定的value为选中项的数组。 多选--选中值{{selectedIds}}
1 2 3 4 5 export default { data() { return { selectedIds: [], citys: [{ id: 1, name: '北京' }, { id: 2, name: '上海' }] } } } 效果如下: 3.3 可搜索 如果候选项很多,那么一个个去找非常费劲。el-select提供了搜索功能,只需要为el-select设置filterable即可启用搜索功能。 可搜索
效果如下,只需要在选择器的输入栏内输入一个关键词,即可筛选出含有关键词的选项,非常方便好用。 4. 事件响应 下拉框最常用的事件,就是选中项发生变化了,可以使用@change绑定对应方法。 选中项变化
1 2 3 4 5 6 methods: { cityChange() { console.log("选中城市id:", this.selectedCityId); } } 需要注意的是,清空选中项时,选中项也发生了变化,也会触发cityChange方法。 5. 小结 选择器用途十分广泛,el-select比原生下拉框的功能要丰富很多很多,非常强大易用。 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |